<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import TrainingCenterCard from '@/components/training-center-card/index.vue';
  import SearchForm from './search-form.vue';

  const router = useRouter();

  const courseList = ref([
    {
      id: 1,
      name: '赛事1',
      status: 'open',
    },
    {
      id: 2,
      name: '赛事1',
      status: 'draft',
    },
  ]);

  const goToDetail = (id: number) => {
    const info = router.resolve({
      name: 'TrainingCenterDetailApp',
      query: {
        id,
      },
    });
    window.open(info.href);
  };
</script>

<template>
  <div style="padding: 20px">
    <a-row :gutter="[20, 20]">
      <a-col>
        <a-card title="已入驻培训机构" :bordered="false">
          <SearchForm />
        </a-card>
      </a-col>

      <a-col>
        <a-card :bordered="false">
          <a-row
            align="center"
            justify="space-between"
            style="margin-bottom: 15px"
          >
            <a-col flex="none">
              共计
              <span style="font-weight: 600; color: rgb(var(--primary-6))">
                23
              </span>
              个培训机构
            </a-col>
            <a-col flex="none">
              <!-- <a-button>
                <template #icon><icon-nav /></template>
                自定义列
              </a-button> -->
            </a-col>
          </a-row>

          <a-table :data="courseList" size="small" :bordered="{ cell: true }">
            <template #columns>
              <a-table-column title="培训机构" fixed="left">
                <template #cell>
                  <TrainingCenterCard />
                </template>
              </a-table-column>
              <a-table-column title="联系人" :width="250">
                <template #cell>
                  <div>
                    <div>王刚</div>
                    <div>18619998922</div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="地区" :width="200">
                <template #cell> 中部/河南/郑州 </template>
              </a-table-column>
              <a-table-column title="入驻时间" :width="200">
                <template #cell> 2023年10月10日 08:00 </template>
              </a-table-column>
              <a-table-column
                title="操作"
                :width="100"
                fixed="right"
                align="center"
              >
                <template #cell="{ record }">
                  <a-button @click="goToDetail(record.id)">查看</a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
